<!-- src/components/Card.vue -->
<template>
  <el-card class="card" shadow="hover">
    <div class="card-header">
      <el-tag class="status-tag" :type="getStatusType" size="small">
        <div class="meter-info">
          <h3 style="justify-content: left;">编号: {{ meterID }}</h3>
          <h4 style="justify-content: left;">别称: {{ alias }}</h4>
        </div>
      </el-tag>
    </div>
    <div class="card-content">
      <img src="../assets/image.png" alt="noData" class="meter-img">
      <div v-if="hasData" class="result-table">
        <div class="result-row">
          <div class="result-cell">{{ Object.keys(aiResArray)[0] }}</div>
          <div class="result-cell">{{ Object.values(aiResArray)[0] }}</div>
        </div>
      </div>

      <div v-else class="no-data">
        <i class="el-icon-warning-outline"></i>
        暂无数据
      </div>

    </div>


    <div class="button-group">
      <el-button type="primary" size="small" @click="edit">
        <i class="el-icon-edit"></i> 编辑
      </el-button>
      <el-button type="info" size="small" @click="detail">
        <i class="el-icon-view"></i> 详细
      </el-button>
    </div>


  </el-card>
</template>

<script>
export default {
  props: {
    meterID: {
      type: [String, Number],  // 允许字符串或数字类型
      required: true
    },
    alias: {
      type: String,
      required: true
    },
    AiRes: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    hasData() {
      return this.AiRes && Object.keys(this.AiRes).length > 0;
    },
    aiResArray() {
      if (!this.AiRes || Object.keys(this.AiRes).length === 0) {
        return {};
      }
      return this.AiRes;
    }
  },
  methods: {
    edit() {
      this.$emit('edit');
    },
    detail() {
      this.$emit('detail');
    }
  }
}
</script>

<style scoped>
.status-tag {
  height: 50px;
  width: 100%;
  padding-left: 15px;
  text-align: left;
  justify-content: left;
}

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
  width: 100%;
}

.meter-info {
  text-align: left;
  width: 100%;
}

.meter-info h3 {
  color: var(--primary-color);
  margin: 0 0 8px 0;
  font-size: 16px;
  text-align: left;
}

.meter-info h4 {
  color: var(--text-regular);
  margin: 0;
  font-size: 14px;
  text-align: left;
}

.card-content {
  flex: 1;
  padding: 12px 0;
  min-height: 120px;
}

.no-data {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

.no-data i {
  font-size: 24px;
  margin-bottom: 8px;
}

.button-group {
  padding-top: 12px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  gap: 8px;
}

.button-group .el-button {
  flex: 1;
}

.el-card {
  background-color: var(--bg-white);
}

.card-header {
  border-bottom: 1px solid var(--border-color);
}

.meter-img {
  display: block; /* 使用块级元素以便居中 */
  margin: 10px auto; /* 上下间距10px，左右自动居中 */
  max-width: 60%; /* 限制最大宽度为容器的60% */
  height: auto; /* 保持图片比例 */
  object-fit: contain; /* 确保图片完整显示 */
}

.result-table {
  width: 100%;
  margin: 10px 0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.result-row {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.result-row:last-child {
  border-bottom: none;
}

.result-cell {
  flex: 1;
  padding: 8px 12px;
  text-align: center;
  font-size: 14px;
}

.result-cell:first-child {
  background-color: var(--primary-light);
  font-weight: 500;
  border-right: 1px solid var(--border-color);
}
</style>


